<template>
  <div class="View">
    <div class="page-view">
      <div class="describe">
        <!-- <span>{{$t('message.homePageTable.title')}}</span> -->
        <div class="router" style="height: 20px;">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item v-for="(proRoute, index) in projectRouteData" :key="index" @click.native="
              getNewFileApi(
                proRoute.ID,
                search,
                tableForm.pageIndex,
                tableForm.pageSize,
                tableForm.fileType
              )
              ">{{ proRoute.Title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="desribe-view">
          <div class="left-describe">
            <i class="el-icon-back" @click="
              getNewFileApi(
                // tableData.length == 0 ? noDataParentId : next_level_id,
                projectRouteData[projectRouteData.length - 2].ID,
                search,
                1,
                tableForm.pageSize,
                tableForm.fileType
              )
              "></i>
            <span class="solid"></span>
            <i class="el-icon-refresh" @click="
              getNewFileApi(
                // parentID,
                projectRouteData[projectRouteData.length - 1].ID,
                search,
                tableForm.pageIndex,
                tableForm.pageSize,
                tableForm.fileType
              )
              "></i>
            <span class="solid"></span>
            <i class="iconfont search" @click="searchData">&#xe824;</i>
            <el-autocomplete v-model="search" clearable class="left-describe-ipt" :fetch-suggestions="querySearchAsync"
              @keyup.enter.native="searchData" @select="handleSelect" @focus="focusGetData" @clear="
                getNewFileApi(
                  // '0',
                  // '',
                  // 1,
                  // tableForm.pageSize,
                  // tableForm.fileType
                  projectRouteData[projectRouteData.length - 1].ID,
                  '',
                  tableForm.pageIndex,
                  tableForm.pageSize,
                  tableForm.fileType
                )
                "></el-autocomplete>
          </div>
          <p class="r-describe">
            <el-button class="black-btn" @click="centerDialogVisible = true">
              <i class="iconfont" style="font-size: 16px;">&#xe825;</i>
              <span>{{ $t("message.public.uploaded") }}</span>
            </el-button>
            <el-button class="black-btn" @click="newProjectDialogFlag = true">
              <i class="iconfont" style="font-size: 16px;">&#xe826;</i>
              <span>{{ $t("message.homePageTable.newProject") }}</span>
            </el-button>
            <i class="el-icon-delete-solid" @click="tableDataDelete()"></i>
          </p>
        </div>
      </div>
      <div class="tableView">
        <div ref="tableCot">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            :max-height="tableHeight" :header-cell-style="{
              color: 'rgba(144,147,153,1)',
              fontSize: '16px',
              textAlign: 'left',
              backgroundColor: '#F8F8F8',
            }" :cell-style="{
              color: 'rgba(96,98,102,1)',
              backgroundColor: '#F8F8F8',
              fontSize: '14px',
              textAlign: 'left',
            }" :row-style="{
              color: 'rgba(96,98,102,1)',
              backgroundColor: '#F8F8F8',
              fontSize: '13px',
              textAlign: 'left',
            }" @selection-change="handleSelectionChange" v-loading="Loading" element-loading-spinner="el-icon-loading"
            element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
            <el-table-column type="selection" width="45"></el-table-column>
            <el-table-column :label="$t('message.homePageTable.name')">
              <template slot-scope="scope">
                <i class="iconfont tableIcon" v-if="scope.row.fileType == 1">&#xe827;</i>
                <i class="iconfont tableIcon" v-if="(scope.row.fileType == 1 && scope.row.ext == 'png') ||
                  scope.row.ext == 'jpg' ||
                  scope.row.ext == 'gif'
                ">&#xe822;</i>
                <i class="iconfont tableIcon" v-if="scope.row.fileType == 2">&#xe823;</i>
                <!-- <i class="iconfont tableIcon">&#xe62b;</i> -->
                <span @click="pushCAD(scope.row)" style="cursor: pointer" class="pushCADStyle"
                  v-if="scope.row.fileType == 1">{{ scope.row.name + `.${scope.row.ext}` }}</span>
                <span v-if="scope.row.fileType == 2" style="cursor: pointer" class="pushCADStyle"
                  @click="enterProject(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="size" :label="$t('message.homePageTable.size')">

              <template slot-scope="scope">{{
                scope.row.size + " KB"
              }}</template>
            </el-table-column>
            <el-table-column prop="modifyTime" :label="$t('message.homePageTable.updated')" sortable></el-table-column>
            <el-table-column prop="userName" :label="$t('message.homePageTable.userName')"
              width="120"></el-table-column>
            <el-table-column prop="status" width="100">

              <template slot-scope="scope">
                <span v-if="scope.row.status == 1" style="color: red">{{
                  $t("message.homePageTable.unfinished")
                }}</span>
                <span v-if="scope.row.status == 2" style="color: red">{{
                  $t("message.homePageTable.uploaded")
                }}</span>
                <span v-if="scope.row.status == 3" style="color: red">{{
                  $t("message.homePageTable.changingFiles")
                }}</span>
                <!-- <span v-if="scope.row.status == 4">{{$t('message.homePageTable.finished')}}</span> -->
              </template>
            </el-table-column>
            <el-table-column :label="$t('message.homePageTable.action')">

              <template slot-scope="scope">
                <el-dropdown placement="bottom-start" trigger="hover">
                  <span class="el-dropdown-link">
                    <i class="el-icon-s-unfold"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <div class="dropdown-view" @click="pushCAD(scope.row)" v-if="scope.row.fileType == 1">
                      <i class="iconfont">&#xe6c4;</i>
                      <span>{{ $t("message.homePageTable.browse") }}</span>
                    </div>
                    <div class="dropdown-view" @click="editFileName(scope.row)">
                      <i class="iconfont">&#xe6c5;</i>
                      <span>{{ $t("message.homePageTable.rename") }}</span>
                    </div>
                    <div class="dropdown-view" @click="downData(scope.row)" v-if="scope.row.fileType == 1">
                      <i class="iconfont">&#xe6c6;</i>
                      <span>{{ $t("message.homePageTable.download") }}</span>
                    </div>
                    <div class="dropdown-view" @click="
                      (copyProjectDialogFlag = true),
                      getAllFolderApi(),
                      (moveCopyRow = scope.row)
                      ">
                      <i class="iconfont">&#xe6c7;</i>
                      <span>{{ $t("message.homePageTable.moveOrCopy") }}</span>
                    </div>
                    <div class="dropdown-view" @click="delectData(scope.row)">
                      <i class="iconfont">&#xe6c8;</i>
                      <span>{{ $t("message.homePageTable.delete") }}</span>
                    </div>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="Pagination-box">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="tableForm.pageIndex" :page-size="tableForm.pageSize" :page-sizes="[10, 20, 30]"
          layout=" prev, pager, next" :total="total" background></el-pagination>
      </div>
      <el-dialog :title="$t('message.public.uploaded')" :visible.sync="centerDialogVisible" width="30%" center
        :append-to-body="true" @close="closeDialog">
        <el-upload class="upload-demo" drag :action="action" multiple ref="upload" style="textalign: center"
          :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false" :before-upload="beforeAvatarUpload"
          :data="form" :file-list="fileList" :headers="token">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            <!-- {{ $t("message.homePageTable.downloadmsg") }}
            <em>{{ $t("message.homePageTable.finishedFile") }}</em> -->
            ここにドラッグあるいはアップロード
          </div>
          <div class="el-upload__tip" slot="tip">
            {{ $t("message.homePageTable.uploadedTip") }}
          </div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 76px !important;" @click="onCancel" size="small">{{
            $t("message.public.cancel")
          }}</el-button>
          <el-button style="width: 76px !important;" type="primary" size="small" @click="submitUpload()">{{
            $t("message.public.confirm")
          }}</el-button>
        </span>
      </el-dialog>
      <el-dialog :title="$t('message.homePageTable.rename')" :visible.sync="fileNameFlag" width="30%" center
        :append-to-body="true">
        <el-form label-position="right" label-width="80px" :model="formLabelAlign">
          <el-form-item label="File Name">
            <el-input v-model="formLabelAlign.fileName" size="small"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 76px !important;" size="small" @click="fileNameFlag = false">{{
            $t("message.public.cancel")
          }}</el-button>
          <el-button style="width: 76px !important;" type="primary" size="small" @click="submitFileName()">{{
            $t("message.public.confirm")
          }}</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 选择想复制到/移动到的文件夹 -->
    <div class="newProjectDialogView" v-if="copyProjectDialogFlag">
      <div class="newProjectDialog">
        <div class="title">
          <span>{{ $t("message.homePageTable.changeMoveOrCopy") }}</span>
          <i class="el-icon-close" @click="copyProjectDialogFlag = false"></i>
        </div>
        <div class="body">
          <p class="tipMessage">
            {{ $t("message.homePageTable.destinationFolder") }}
          </p>
          <el-cascader :options="options" :props="{ checkStrictly: true, value: 'value', label: 'label' }" clearable
            v-model="cascaderValue" class="cascader"></el-cascader>
          <div class="footer">
            <button class="footer-btn" @click="MoveCopyProject(1)">
              {{ $t("message.homePageTable.move") }}
            </button>
            <button class="footer-btn" @click="MoveCopyProject(2)">
              {{ $t("message.homePageTable.copy") }}
            </button>
            <button class="footer-btn" @click="(copyProjectDialogFlag = false), (cascaderValue = [])">
              Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新建文件夹 -->
    <div class="newProjectDialogView" v-if="newProjectDialogFlag">
      <div class="newProjectDialog">
        <div class="title">
          <span>{{ $t("message.homePageTable.newProject") }}</span>
          <i class="el-icon-close" @click="(newProjectDialogFlag = false), (value = '')"></i>
        </div>
        <div class="body">
          <p class="tipMessage">
            {{ $t("message.homePageTable.projectName") }}
          </p>
          <el-input :placeholder="$t('message.homePageTable.inputPlaceholder')" v-model="value"
            class="cascader"></el-input>
          <div class="footer">
            <!-- <button class="footer-btn" @click="newProjectDialogFlag = false,value=''">Cancel</button>
            <button class="footer-btn" @click="addProjectFun">{{$t('message.public.confirm')}}</button>-->
            <el-button style="width: 86px !important;" @click="(newProjectDialogFlag = false), (value = '')"
              size="small">{{
                $t("message.public.cancel")
              }}</el-button>
            <el-button style="width: 86px !important;" type="primary" size="small" @click="addProjectFun">{{
              $t("message.public.confirm")
            }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetFile,
  // DelFile,
  updateFile,
  getNewFile,
  addNewFolder,
  excuteNewFile,
  getAllFolder,
  delNewFile,
  getPartentFolder,
  uploadFileVerify
} from "../../api/api";
import BASE from "../../utils/base";
import { getLocalStorage } from "../../utils/storage";
import $ from "jquery";
import { showLoading, hideLoading } from "@/utils/loading";
// 导出模块
export default {
  // 模块名字
  name: "HomePageView",
  // 模块数据
  data() {
    //数据
    return {
      Loading: false,
      state: false,
      value: "",
      moveCopyRow: "",
      cascaderValue: [],
      newProjectDialogFlag: false,
      copyProjectDialogFlag: false,
      tableData: [],
      total: 0,
      tableForm: {
        pageIndex: 1,
        pageSize: 50,
        fileID: "",
        userID: getLocalStorage("userID"),
        fileType: 0,
      },
      fileList: [],
      action: BASE.IP + "/api/File/addNewFile",
      token: { 'Authorization': "Bearer " + ((sessionStorage.token && getLocalStorage('token')) ? sessionStorage.token : "") },
      centerDialogVisible: false,
      form: {
        creator: getLocalStorage("userID"),
        modifier: getLocalStorage("userID"),
        UserID: getLocalStorage("userID"),
        ParentID: "0",
      },
      multipleSelection: [],
      formLabelAlign: {
        id: "",
        fileName: "",
      },
      fileNameFlag: false,
      tableHeight: 590,
      connection: "", //signalr连接
      messages: [], //返回消息
      search: "",
      options: [],
      parentID: "0",
      next_level_id: "0",
      restaurants: [],
      noDataParentId: "0",
      projectRouteData: [],
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    handleSizeChange(val) {
      this.tableForm.pageSize = val;
      this.getNewFileApi(
        this.parentID,
        "",
        this.tableForm.pageIndex,
        this.tableForm.pageSize,
        this.tableForm.fileType
      );
    },
    handleCurrentChange(val) {
      this.tableForm.pageIndex = val;
      this.getNewFileApi(
        this.parentID,
        "",
        this.tableForm.pageIndex,
        this.tableForm.pageSize,
        this.tableForm.fileType
      );
    },
    getData() {
      GetFile(this.tableForm).then((res) => {
        this.tableData = [];
        this.total = 0;
        if (res.data.code != 0) {
          return;
        }
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    //获取新文件列表
    getNewFileApi(parentID, fileName, pageIndex, pageSize, fileType) {
      this.Loading = true;
      console.log('wrerwer');
      let dataJson = {
        parentID: parentID,
        fileName: fileName,
        pageIndex: pageIndex,
        pageSize: pageSize,
        fileType: fileType,
      };
      getNewFile(dataJson).then((res) => {
        this.Loading = false;
        this.tableData = [];
        this.total = 0;
        this.projectRouteData = [];
        if (res.data.code != 0) {
          getPartentFolder({ id: parentID }).then((res) => {
            console.log(res, "getPartentFolder");
            this.projectRouteData = JSON.parse(res.data.data);
          });
          return;
        }
        this.tableData = res.data.data;
        this.total = res.data.count;
        this.next_level_id = this.tableData[0].grandID;
        this.parentID = this.tableData[0].parentID;
        this.form.ParentID = this.tableData[0].parentID;
        this.noDataParentId = this.tableData[0].parentID;
        getPartentFolder({ id: parentID }).then((res) => {
          console.log(res, "getPartentFolder");
          this.projectRouteData = JSON.parse(res.data.data);
        });
      });
    },
    //新建文件夹
    addNewFolderApi(parentID, name) {
      let dataJson = {
        id: "",
        parentID: parentID,
        name: name,
        creator: getLocalStorage("userID"),
      };
      console.log(dataJson);
      addNewFolder(dataJson).then((res) => {
        if (res.data.code != 0) {
          this.$alert(res.data.msg, '', {
            confirmButtonText: 'OK',
            type: 'warning',
          });

          return;
        }
        this.newProjectDialogFlag = false;
        this.value = "";
        this.getNewFileApi(
          this.parentID,
          "",
          this.tableForm.pageIndex,
          this.tableForm.pageSize,
          this.tableForm.fileType
        );
      });
    },
    addProjectFun() {
      this.addNewFolderApi(this.parentID, this.value);
    },
    //表单提交
    submitUpload() {
      this.$refs.upload.submit();
    },
    //文件上传成功触发
    uploadSuccess(response, file, fileList) {


      if (response.code == 0) {
        this.getNewFileApi(
          this.parentID,
          "",
          this.tableForm.pageIndex,
          this.tableForm.pageSize,
          this.tableForm.fileType
        );
        this.fileList = [];
        this.$message({
          message: this.$t("message.homePageTable.suploaded"),
          type: "success",
        });
        this.centerDialogVisible = false;
      } else {
        this.$alert(response.msg, '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });

      }
    },
    //文件上传失败触发
    uploadFalse(response, file, fileList) {
      this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
        confirmButtonText: 'OK',
        type: 'warning',
      });

    },
    waitFn() {
      return new Promise((resolve, reject) => {
        if (this.state) {
          resolve();
        } else {
          const intervalId = setInterval(() => {
            if (this.state) {
              clearInterval(intervalId);
              resolve();
            }
          }, 500);
        }
      });
    },
    // 上传前対文件的大小和类型的判断
    async beforeAvatarUpload(file) {
      console.log('file', file);
      this.form.fileName = file.name;
      console.log('this.form.fileName', this.form.fileName);
      let res = await uploadFileVerify(this.form);

      if (res.data.code == 451) {
        this.$confirm(res.data.msg, '', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(async () => {
          this.form.Cover = 1;
          this.state = true;
        }).catch(() => {
          this.$refs.upload.cancel(); // 调用 cancel 方法取消上传  
          return
        });
        this.state = false;
        await this.waitFn();
      }


      if (file.size > 524288000) {
        this.$alert(this.$t('message.public.tip2'), '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
        return false;
      }

    },

    //表单取消
    onCancel() {
      this.fileList = [];
      this.centerDialogVisible = false;
    },
    closeDialog() {
      this.fileList = [];
    },
    //文件削除
    delectData(row) {
      this.$confirm(
        this.$t("message.public.filetips"),
        this.$t("message.public.delete"),
        {
          confirmButtonText: this.$t("message.public.confirm"),
          cancelButtonText: this.$t("message.public.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: [row.id],
          };
          delNewFile(data).then((res) => {
            let totalPage = Math.ceil(
              (this.total - 1) / this.tableForm.pageSize
            );
            let currentPage =
              this.tableForm.pageIndex > totalPage
                ? totalPage
                : this.tableForm.pageIndex;
            this.tableForm.pageIndex =
              this.tableForm.pageIndex < 1 ? 1 : currentPage;
            this.getNewFileApi(
              this.parentID,
              "",
              this.tableForm.pageIndex,
              this.tableForm.pageSize,
              this.tableForm.fileType
            );
          });
        })
        .catch(() => { });
    },
    downData(row) {
      let name = row.name + "." + row.ext;
      let url = row.sourcePath;
      // this.fdownload(url, name);
      this.$downFileByBlob({ path: url, isDown: true, fileName: name, isOpenNewBlank: false })
    },
    fdownload(url, filename) {
      let _this = this;
      this.getBlob(url, function (blob) {
        _this.saveAs(blob, filename);
      });
    },
    getBlob(url, cb) {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (xhr.status === 200) {
          cb(xhr.response);
        }
      };
      xhr.send();
    },
    saveAs(blob, filename) {
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
      } else {
        var link = document.createElement("a");
        var body = document.querySelector("body");
        link.href = window.URL.createObjectURL(blob);
        link.download = filename;
        // fix Firefox
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    tableDataDelete() {
      if (this.multipleSelection.length == 0) {
        return;
      }
      let id_list = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        id_list.push(this.multipleSelection[i].id);
      }
      this.$confirm(
        this.$t("message.public.filetips"),
        this.$t("message.public.delete"),
        {
          confirmButtonText: this.$t("message.public.confirm"),
          cancelButtonText: this.$t("message.public.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: id_list,
          };
          delNewFile(data).then((res) => {
            let totalPage = Math.ceil(
              (this.total - 1) / this.tableForm.pageSize
            );
            let currentPage =
              this.tableForm.pageIndex > totalPage
                ? totalPage
                : this.tableForm.pageIndex;
            this.tableForm.pageIndex =
              this.tableForm.pageIndex < 1 ? 1 : currentPage;
            this.getNewFileApi(
              this.parentID,
              "",
              this.tableForm.pageIndex,
              this.tableForm.pageSize,
              this.tableForm.fileType
            );
          });
        })
        .catch(() => { });
    },
    editFileName(row) {
      this.fileNameFlag = true;
      this.formLabelAlign.id = row.id;
      this.formLabelAlign.fileName = row.name;
      console.log(row);
    },
    submitFileName() {
      updateFile(this.formLabelAlign).then((res) => {
        this.fileNameFlag = false;
        if (res.data.code != 0) {
          this.$alert(res.data.msg, '', {
            confirmButtonText: 'OK',
            type: 'warning',
          });
          return;
        }
        // this.getData();
        this.getNewFileApi(
          this.parentID,
          this.search,
          this.tableForm.pageIndex,
          this.tableForm.pageSize,
          this.tableForm.fileType
        );
      });
    },
    pushCAD(row) {
      console.log(row);
      let EXT = row.ext
      if (
        EXT == "png" ||
        EXT == "jpg" ||
        EXT == "gif" ||
        EXT == "bmp" ||
        EXT == "jpeg" ||
        EXT == "tif" ||
        EXT == "svg" ||
        EXT == "dwg" ||
        EXT == "wmf" ||
        EXT == "dxf" ||
        EXT == "tiff"
      ) {
        var { href } = this.$router.resolve({
          name: "CAD",
          query: {
            id: row.id,
            radioType: -1
          },
        });
        let newWindow = window.open(href, "_blank");
        return
      }
      window.open(row.path, "_blank");

    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;
      cb(results);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    //进入文件夹
    enterProject(row) {
      this.parentID = row.id;
      this.form.ParentID = row.id;
      this.getNewFileApi(
        row.id,
        this.search,
        1,
        this.tableForm.pageSize,
        this.tableForm.fileType
      );
    },
    getAllFolderApi() {
      getAllFolder().then((res) => {
        console.log(res);
        if (res.data.code != 0) {
          return;
        }
        this.options = JSON.parse(res.data.data);
      });
    },
    // 移动复制文件夹
    excuteNewFileApi(operationType, sourceID, targetID) {
      let dataJson = {
        operationType: operationType,
        sourceID: sourceID,
        targetID: targetID,
      };
      excuteNewFile(dataJson).then((res) => {
        this.cascaderValue = [];
        if (res.data.code != 0) {
          return;
        }
        this.copyProjectDialogFlag = false;
        this.getNewFileApi(
          this.parentID,
          "",
          this.tableForm.pageIndex,
          this.tableForm.pageSize,
          this.tableForm.fileType
        );
      });
    },
    MoveCopyProject(operationType) {
      // console.log(this.cascaderValue,this.moveCopyRow);
      this.excuteNewFileApi(
        operationType,
        this.moveCopyRow.id,
        this.cascaderValue.pop()
      );
    },
    focusGetData() {
      let dataJson = {
        parentID: this.parentID,
        fileName: "",
        pageIndex: 1,
        pageSize: 10000,
        fileType: 0,
      };
      this.restaurants = [];
      getNewFile(dataJson).then((res) => {
        if (res.data.code != 0) {
          return;
        }
        let restaurants = res.data.data;
        restaurants.forEach((Item) => {
          this.restaurants.push({
            value: Item.name,
            id: Item.id,
          });
        });
      });
    },
    searchData() {
      this.getNewFileApi(this.parentID, this.search, 1, 10000, 0);
    },
    projectClick() { },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() {
    // 后台推送
    this.$socket.on("ReceiveMessage", function (id, status) {
      if (id && status) {
        for (let i = 0; i < that.tableData.length; i++) {
          if (that.tableData[i].id == id) {
            that.tableData[i].status = status;
          }
        }
      }
    });
    this.$socket.start();

    this.getNewFileApi(
      "0",
      "",
      this.tableForm.pageIndex,
      this.tableForm.pageSize,
      this.tableForm.fileType
    );
    // this.getData();
    let that = this;
    this.$nextTick(function () {
      let heightStyle = $(".page-view").height() - 200;
      that.tableHeight = heightStyle;
    });
  },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    const that = this;
    this.$nextTick(function () {
      window.onresize = () => {
        return (() => {
          let heightStyle = $(".page-view").height() - 200;
          that.tableHeight = heightStyle;
        })();
      };
      if ($(".LeftMenu").width() == 64) {
        $(".View").width($(".Content").width() - 64);
      } else if ($(".LeftMenu").width() == 192) {
        $(".View").width($(".Content").width() - 192);
      }
    });
  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() {
    // 使用querySelectorAll选中所有带有.elx-cell--checkbox类的元素
    var elements = document.querySelectorAll('.elx-cell--checkbox');

    // 遍历这些元素  
    elements.forEach(function (element) {
      // 修改每个元素的title属性  
      element.setAttribute('title', '');
    })
  },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>

<style lang="scss" scoped>
.View {
  width: calc(100% - 192px);
  height: 100%;

  .page-view {
    position: relative;
    // width: calc(100% - 112px);
    height: 100%;
    margin: 16px 0 0 0;
    // background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    // border: 1px solid #b4b4b4;
    padding: 0 24px;

    .describe {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      padding: 0 0 8px 0px;
      font-weight: bold;

      .desribe-view {
        margin-top: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .left-describe {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .solid {
          width: 1px;
          height: 19px;
          background: #ededed;
          margin: 0 16px;
        }

        .el-icon-back,
        .el-icon-refresh,
        .search {
          font-size: 24px;
          cursor: pointer;
        }

        .left-describe-ipt {
          width: 200px;
          margin-left: 8px;

          ::v-deep .el-input__inner {
            border: 0 none;
            border-bottom: 1px solid #dcdfe6;
            font-weight: 500;
            font-size: 14px;
            border-radius: 0;
            background: #f8f8f8;
            height: 28px;
          }

          ::v-deep .el-input .el-input__clear {
            line-height: 28px;
          }
        }
      }
    }

    .black-btn {
      padding: 0 8px;
      height: 32px;
      font-size: 14px;
      // color: rgba(0, 0, 0, 0.65);
      // background: #213d49;
      border-radius: 4px;
      font-weight: 500;
      margin: 0 8px;
      // border: 1px solid #d9d9d9;

      span {
        margin: 0 0 0 8px;
      }
    }

    .r-describe {
      display: flex;
      align-items: center;

      .el-icon-upload2,
      .el-icon-download,
      .el-icon-delete-solid,
      .el-icon-refresh {
        font-size: 24px;
        // color: rgba(144, 147, 153, 1);
        margin: 0 8px;
        cursor: pointer;
      }
    }

    .footer {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 47px;
      line-height: 47px;
      border-top: 1px solid rgba(229, 229, 229, 1);

      span {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin-left: 34px;
      }
    }
  }

  ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #fff1f0 !important;
  }

  ::v-deep .el-table {
    height: 671px;
  }

  .el-icon-s-unfold {
    font-size: 24px;
    position: relative;
    cursor: pointer;
  }
}

.pushCADStyle {
  cursor: pointer;
  transition: 0.2s;
}

.pushCADStyle:hover {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.Pagination-box {
  position: absolute;
  right: 32px;
  bottom: 80px;

  ::v-deep .el-pagination.is-background .btn-next,
  ::v-deep .el-pagination.is-background .btn-prev,
  ::v-deep .el-pagination.is-background .el-pager li {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  // ::v-deep .el-pagination.is-background .el-pager li {
  //   background:rgba(30,30,30,1);
  //   color:rgba(255,255,255,1);
  // }
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #213d49;
    color: rgba(255, 255, 255, 1);
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: none;
  }
}

.dropdown-view {
  width: 160px;
  height: 40px;
  line-height: 40px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;

  .iconfont {
    font-size: 24px;
    margin: 0 8px;
  }
}

.dropdown-view:hover {
  background: #fff1f0;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #213d49;
  border-color: #213d49;
  color: #001529;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #213d49;
  border-color: #213d49;
  color: #001529;
}

::v-deep .el-checkbox__inner:hover {
  background-color: #213d49;
}

::v-deep .el-checkbox__inner:hover {
  background-color: #213d49;
  color: #001529;
}

::v-deep .el-checkbox__inner:hover {
  border-color: #213d49;
}

.search {
  // margin-left: 16px;
  color: #606266;
  font-weight: 500;
  cursor: pointer;
}

.newProjectDialogView {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;

  // background: rgba(0, 0, 0, 0.2);
  .newProjectDialog {
    position: absolute;
    width: 488px;
    height: 208px;
    background: #ffffff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03),
      0px 9px 28px 0px rgba(0, 0, 0, 0.05),
      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -30%);
    left: 50%;
    top: 30%;

    .title {
      width: 100%;
      height: 40px;
      background: #fafafa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);

      .el-icon-close {
        cursor: pointer;
      }
    }

    .body {
      height: calc(100% - 40px);
      width: 100%;
      padding: 0 24px;

      .tipMessage {
        padding: 16px 0 8px 0;
      }

      .cascader {
        width: 100%;
        height: 32px;

        ::v-deep .el-input__inner {
          height: 32px;
        }
      }

      .footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 34px;

        .footer-btn {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 4px;
          min-width: 82px;
          height: 32px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-left: 16px;
        }
      }
    }
  }
}
.tableView{
  ::v-deep .el-table{
    background-color: #f8f8f8;
  }
}

.tableIcon {
  font-size: 20px;
  margin: 0 4px;
}

.upload-demo {
  width: 360px;
  margin: 0 auto;
}

::v-deep .el-breadcrumb__inner {
  cursor: pointer;
}
</style>